import { Modal, Form, Input, message, Select } from 'antd';
import React, { useState } from 'react';
import { apiDomain } from '../../constant';
import './index.scss';
import { scrollIntoView } from '../../utils';
import { useNavigate } from 'react-router-dom';

function App() {
  const [appointForm] = Form.useForm();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [btnLoading, setBtnLoading] = useState(false);
  const [currentDate, setCurrentDate] = useState('1110');
  const [activeMenu, setActiveMenu] = useState();
  const navigate = useNavigate();
  const [surveyForm] = Form.useForm();
  const [isSurveyModalOpen, setIsSurveyModalOpen] = useState(false);

  const showModal = () => {
    appointForm.resetFields();
    setBtnLoading(false);
    setIsModalOpen(true);
  };

  const handleOk = () => {
    appointForm.submit();
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const handleFinish = (values) => {
    const {
      first_name, last_name, email, career, office,
    } = values;

    setBtnLoading(true);

    fetch(`${apiDomain}/api/system/email/user`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        first_name,
        last_name,
        email,
        career,
        office,
      })
    }).then(function (response) {
      return response.json();
    }).then(function (jsonData) {
      setBtnLoading(false);

      const { is_success } = jsonData;
      if (is_success) {
        message.success('Successfully submitted!');
        setIsModalOpen(false);
      }
    }).catch(function () {
      message.error('An error occurred. Please try again later!');
      setBtnLoading(false);
    });
  }

  // 问卷调研
  const showSurveyModal = () => {
    surveyForm.resetFields();
    setBtnLoading(false);
    setIsSurveyModalOpen(true);
  };

  const handleSurveyOk = () => {
    surveyForm.submit();
  };

  const handleSurveyCancel = () => {
    setIsSurveyModalOpen(false);
  };

  const handleSurveyFinish = (values) => {
    const {
      satisfaction, suggestion
    } = values;

    setBtnLoading(true);

    fetch(`${apiDomain}/api/system/questionnaire`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        satisfaction,
        suggestion
      })
    }).then(function (response) {
      return response.json();
    }).then(function (jsonData) {
      setBtnLoading(false);

      const { is_success } = jsonData;
      if (is_success) {
        message.success('Successfully submitted!');
        setIsSurveyModalOpen(false);
      }
    }).catch(function () {
      message.error('An error occurred. Please try again later!');
      setBtnLoading(false);
    });
  }

  const handleAddress = () => {
    window.open('https://surl.amap.com/1djaOXDFR8b6', '_blank');
  }

  const handleMenuClick = (type) => {
    setActiveMenu(type);

    const element = document.getElementById(type);

    // element.scrollIntoView({ behavior: 'smooth' });
    scrollIntoView(element, { offset: 92, duration: 300 });
  }

  const handleLogoClick = () => {
    window.open('https://www.chuhai.edu.hk', '_blank');
  }

  const handleLangClick = () => {
    navigate('/home/ch');
  }

  return (
    <div className="road-show-index-en">
      <div className="road-show-index-en__header">
        <div className="logo" onClick={handleLogoClick}>
          <img src={require('../../images/logo1.png')} />
          <img src={require('../../images/logo2.jpg')} />
        </div>
        <div className="menu">
          <a className={activeMenu === 'intro' ? 'active' : ''} onClick={() => { handleMenuClick('intro') }}>Introduction</a>
          <a className={activeMenu === 'topic' ? 'active' : ''} onClick={() => { handleMenuClick('topic') }}>Schedule</a>
          <a className={activeMenu === 'teacher' ? 'active' : ''} onClick={() => { handleMenuClick('teacher') }}>Lecturer</a>
          <div className="btn" onClick={showModal}>Make an appointment</div>
          <div className="btn survey-btn" onClick={showSurveyModal}>Questionnaire</div>
          <div className="lang">
            <span onClick={handleLangClick}>CH</span> / <span className="disable">EN</span>
          </div>
        </div>
      </div>

      <div style={{ height: 92 }}></div>

      <div className="road-show-index-en__banner" id="banner">
        <img src={require('../../images/banner.png')} />
        <div className="intro">
          <h2>Conference on the Development of Cantonese Pop Music in the Southeast Asia Conference Schedule</h2>
          <h1>Nostalgia of Diaspora Music</h1>
          <div>
            <div className="time"><i></i>Date: 11/10-11/11</div>
          </div>
          <div>
            <div className="location"><i></i>Location: Hong Kong</div>
          </div>
        </div>
      </div>

      {/* 研讨会说明 */}
      <div className="road-show-index-en__intro" id="intro">
        <h1>Nostalgia of Diaspora Music: Conference on the Development of Cantonese Pop Music in the Southeast Asia Conference Schedule</h1>
        <div>To date, there has been a significant gap in work on the social history of Chinese popular music: the development of Cantonese pop music in Southeast Asia and the overseas Chinese circles. To address this deficiency, this conference will gather all academic scholars and experts to explore the history of development of Cantonese popular songs in Southeast Asia, including Singapore, Malaysia and Taiwan. At the same time, it will also extend the discussion of the development of Cantonese pop in Chinese communities such as Myanmar, Thailand, and Vietnam. Three key themes will be explored in the conference:</div>
        <div style={{ padding: '20px 0' }}>
          <div>1. The development of Cantonese pop music in the Southeast Asian pop music industry and the role of Cantonese pop music in the Southeast Asian music scene;</div>
          <div>2. The shared memory of Cantonese pop music culture among Chinese in Taiwan and Southeast Asia;</div>
          <div>3. How the changing nature of popular culture affect the development of Cantonese pop music?</div>
        </div>
        <div>Apart from examining the social, economic, cultural and political factors that influence Cantonese pop music, the industry behind it and shared audience memories, the focal point of the conference is to draw attention to aspect of time by examining how the cold war in Asia reconstructed Cantonese pop’s cultural heritages and how these heritages were transformed through different ideological structures and facets, aiming to explore the role of popular music in political struggles between warring ideologies and shows how those struggles both informed and were informed by the Cantonese songs of a global popular music market.</div>
      </div>

      {/* 日程 */}
      <div className="road-show-index-en__topic" id="topic">
        <div className="road-show-index-en__topic__container">
          <h1>Schedule</h1>
          <div className="road-show-index-en__topic__main">
            <div className="road-show-index-en__topic__date-list">
              <div className={currentDate === '1110' ? 'active' : ''} onClick={() => { setCurrentDate('1110') }}>
                <div className="date-week">
                  <div className="date">11/10</div>
                  <div className="week">Friday</div>
                </div>
                <div className="split">/</div>
                <div className="station">Hong Kong</div>
              </div>

              <div className={currentDate === '1111' ? 'active' : ''} onClick={() => { setCurrentDate('1111') }}>
                <div className="date-week">
                  <div className="date">11/11</div>
                  <div className="week">Saturday</div>
                </div>
                <div className="split">/</div>
                <div className="station">Hong Kong</div>
              </div>
            </div>
            {
              currentDate === '1110' && (
                <div className="road-show-index-en__topic__time-line">
                  <div className="station-detail">
                    <div className="station-detail__left">
                      <div className="station-detail__name"><i></i>Hong Kong</div>
                      <div className="station-detail__address" onClick={handleAddress}>
                        <div>Hall 5, Chuhai College, Hong Kong, 80 Castle Peak Road, Castle Peak Bay Section, Tuen Mun, Hong Kong</div>
                        <i></i>
                      </div>
                    </div>
                    <div className="station-detail__btn" onClick={showModal}>Make an appointment</div>
                  </div>

                  <div className="time-line">
                    <div className="time-line__item">
                      <span className="time-line__period">09:30 - 09:40</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">CHEN Zhi, President of HKCHC<br/><i>Welcoming Speech 1</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">09:40 - 09:50</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">FUNG Kam-Wing, Dean, Faculty of Arts and Social Sciences, HKCHC<br/><i>Welcoming Speech 2</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">09:50 - 10:00</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">Photo-taking</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">Panel 1</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">Moderator: LEE Kwok-Fong, Associate Professor, Department of Journalism and Communication, HKCHC</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">10:00 - 10:30</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">CHU Yiu-Wai, Professor and Director of Hong Kong Studies Programme, The University of Hong Kong</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">10:30 - 11:00</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">FUNG Anthony, Director, Hong Kong Institute of Asia-Pacific Studies, the Chinese University of Hong Kong<br/><i>Teresa Teng: Her Image, Fans and Society</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">11:00 - 11:15</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">Tea Break</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">Panel 2</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">Moderator: HU Hsin-Li, Assistant Professor, School of Communication, HSUHK</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">11:15 - 11:45</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">CHUNG She-Fong, Associate Professor-level Technical Expe, College of Communication, National Chengchi University<br/><i>Resonance of Labour Songs: From Sam Hui’s "Working Class" to the Documented Sound Tracks in Unaccounted Travelogues</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">11:45 - 12:15</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">CHUN Ming-Huang, Associate Professor, College of Communication, National Chengchi University<br/><i>Revisiting "Gangtai" Music: The Controversy between Communicative Memory and Cultural Memory</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">12:15 - 13:30</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">Lunch(Satay-inn)</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">Panel 3</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">Moderator: Jeroen de Kloet, Professor in Globalisation Studies</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">14:00 - 14:30</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">LIEW Kai-Khiun, Assistant Professor, Department of Social Sciences, HKMU<br/><i>Retrospective Soundscapes: Cantopop pasts in Southeast Asia</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">14:30 - 15:00</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">CHEN Szu-Wei, PhD in Film and Media Studies from University of Stirling (UK)<br/><i>Positioning Hong Kong in C-Pop History from Mandopop to Cantopop</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">15:00 - 15:15</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">Tea Break</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">Panel 4</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">Moderator: CHENG Chen-Ching, Assistant Professor, Department of Journalism and Communication, HKCHC</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">15:15 - 15:45</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">LEI Chin-Pang, Assistant Professor, University of Macau<br/><i>The Bygone Days: Space, Cultural Identity and Cantopop’s History in Anita</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">15:45 - 16:15</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">JIAN Miao-Ju, Professor of Communication at Chung Cheng University<br/><i>Hong Kong pop music in Taiwanese memories</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">16:15 - 16:35</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">Tea Break</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">Roundtable discussion</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">Moderator: WU Shih-Chia, Associate Professor of Practice, School of Journalism and Communication, CUHK<br/><i>The Past and Present of Popular Music in Taiwan and Hong Kong</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">16:35 - 17:35</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">
                        LEI Chin-Pang, Assistant Professor, University of Macau<br/>
                        JIAN Miao-Ju, Professor of Communication at Chung Cheng University, Hong Kong pop music in Taiwanese memories<br/>
                        HUANG Chun-Ming, Associate Professor, College of Communication, Chengchi University<br/>
                        LIEW Kai-Khiun, Assistant Professor, Department of Social Sciences, HKMU
                      </span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">17:35</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">Dinner(Café Lagoon)</span>
                    </div>

                  </div>

                  <div className="tips">This meeting is organized by the Research Grants Council of the Hong Kong Special Administrative Region (RGC) Full sponsorship for the Interdisciplinary Development Program (UGC/IID13/H01/22)</div>
                </div>
              )
            }

            {
              currentDate === '1111' && (
                <div className="road-show-index-en__topic__time-line">
                  <div className="station-detail">
                    <div className="station-detail__left">
                      <div className="station-detail__name"><i></i>Hong Kong</div>
                      <div className="station-detail__address" onClick={handleAddress}>
                        <div>Hall 5, Chuhai College, Hong Kong, 80 Castle Peak Road, Castle Peak Bay Section, Tuen Mun, Hong Kong</div>
                        <i></i>
                      </div>
                    </div>
                    <div className="station-detail__btn" onClick={showModal}>Make an appointment</div>
                  </div>

                  <div className="time-line">
                    <div className="time-line__item">
                      <span className="time-line__period">Panel 5</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">Moderator: CHENG Chen-Ching, Assistant Professor, Department of Journalism and Communication, HKCHC</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">09:00 - 10:30</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">Special Screening<br/><i>Zhou Lan-Ping: His Life and Music</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">10:30 - 11:00</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">
                        CHEN Szu-Wei, PhD in Film and Media Studies from University of Stirling (UK)<br/>
                        ZHOU Yang-Ming, Documentary Director<br/>
                        HUANG Zhi-Le, Project Manager at Beijing United Entertainment Partners Culture and Media Co Ltd.<br/>
                        <i>Academic x Filmmaker Conversation</i>
                      </span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">11:00 - 11:15</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">Tea Break</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">Panel 6</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">Moderator: KONG Xiao-Wei, Head of Department of Finance, HKCHC</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">11:15 - 11:45</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">Jeroen de Kloet, Professor in Globalisation Studies<br/><i>Revisiting the Rock Mythology – On Wutiaoren, Li Zhi, and Song Dongye</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">11:45 - 12:15</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">YAN Feng, Professor, Department of Chinese Language and Literature, Fudan University<br/><i>The non-musicalization and musicalization of modern Chinese literati</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">12:15</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">
                        FUNG Kam-Wing, Dean, Faculty of Arts and Social Sciences, HKCHC<br/>
                        MIAO-JU JIAN, Professor of Communication at Chung Cheng University<br/>
                        KONG Xiao-Wei, Head of Department of Finance, HKCHC<br/>
                        CHENG Chen-Ching, Assistant Professor, Department of Journalism and Communication, HKCHC<br/>
                        <i>Conference Reflections and Closing Speech</i>
                      </span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">12:15</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">Fairwell Lunch (YUE)</span>
                    </div>
                  </div>

                  <div className="tips">This meeting is organized by the Research Grants Council of the Hong Kong Special Administrative Region (RGC) Full sponsorship for the Interdisciplinary Development Program (UGC/IID13/H01/22)</div>
                </div>
              )
            }
          </div>
        </div>
      </div>

      {/* 讲师 */}
      <div className="road-show-index-en__teacher" id="teacher">
        <h2>Lecturer</h2>
        <div className="road-show-index-en__teacher__tips">Ranking in no particular order</div>
        <div className="road-show-index-en__teacher__content">
          <div className="road-show-index-en__teacher__single">
            <img src={require('../../images/t1.jpg')} />
            <div className="name">Anthony FUNG</div>
            <div className="intro">Director, Hong Kong Institute of Asia-Pacific Studies, the Chinese University of Hong Kong</div>
          </div>
          <div className="road-show-index-en__teacher__single">
            <img src={require('../../images/t2.jpg')} />
            <div className="name">CHOW Yiu Fai</div>
            <div className="intro">Professor, Department of Humanities and Creative Writing, HKBU</div>
          </div>
          <div className="road-show-index-en__teacher__single">
            <img src={require('../../images/t3.jpg')} />
            <div className="name">MIAO-JU JIAN</div>
            <div className="intro">Professor of Communication at Chung Cheng University</div>
          </div>
          <div className="road-show-index-en__teacher__single">
            <img src={require('../../images/t4.jpg')} />
            <div className="name">Jeroen de Kloet</div>
            <div className="intro">Professor in Globalisation Studies and Director of the Amsterdam Centre for Globalisation Studies</div>
          </div>
          <div className="road-show-index-en__teacher__single">
            <img src={require('../../images/t5.jpg')} />
            <div className="name">CHU Yiu Wai Stephen</div>
            <div className="intro">Professor and Director of Hong Kong Studies Programme, The University of Hong Kong</div>
          </div>
          <div className="road-show-index-en__teacher__single">
            <img src={require('../../images/t6.jpg')} />
            <div className="name">Chin Pang LEI</div>
            <div className="intro">Assistant Professor, University of Macau</div>
          </div>
          <div className="road-show-index-en__teacher__single">
            <img src={require('../../images/t7.jpg')} />
            <div className="name">YAN Feng</div>
            <div className="intro">Professor, Department of Chinese Language and Literature, Fudan University</div>
          </div>
          <div className="road-show-index-en__teacher__single">
            <img src={require('../../images/t8.jpg')} />
            <div className="name">CHUN MING HUANG</div>
            <div className="intro">Associate Professor, College of Communication, Chengchi University</div>
          </div>
          <div className="road-show-index-en__teacher__single">
            <img src={require('../../images/t9.jpg')} />
            <div className="name">SHE-FONG CHUNG</div>
            <div className="intro">Associate Professor-level Technical Expe, College of Communication, National Chengchi University</div>
          </div>
          <div className="road-show-index-en__teacher__single">
            <img src={require('../../images/t10.jpg')} />
            <div className="name">Zhou Yang-Ming</div>
            <div className="intro">Documentary Director</div>
          </div>
          <div className="road-show-index-en__teacher__single">
            <img src={require('../../images/t11.jpg')} />
            <div className="name">CHEN Szu-Wei</div>
            <div className="intro">Assistant Professor of the Graduate Institute of Musicology and the Director of NTU Center for the Arts at Taiwan University</div>
          </div>
          <div className="road-show-index-en__teacher__single">
            <img src={require('../../images/t12.jpg')} />
            <div className="name">Liew Kai Khiun</div>
            <div className="intro">Assistant Professor, HKMU</div>
          </div>
        </div>
      </div>

      <div className="road-show-index-en__float-btn" onClick={showModal}>
        <i></i>Make an appointment
      </div>

      <div className="road-show-index-ch__survey" title="Questionnaire" onClick={showSurveyModal}></div>

      <Modal
        title="Please fill in the appointment information"
        open={isModalOpen}
        okText="Submit"
        cancelText="Cancel"
        confirmLoading={btnLoading}
        onOk={handleOk}
        onCancel={handleCancel}>
        <Form
          form={appointForm}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          labelAlign="left"
          colon={false}
          onFinish={handleFinish}
          autoComplete="off"
        >
          <Form.Item
            label="First name"
            name="first_name"
            rules={[{ required: true, message: 'First name cannot be empty!' }]}
          >
            <Input placeholder="Please enter your first name" allowClear />
          </Form.Item>
          <Form.Item
            label="Last name"
            name="last_name"
            rules={[{ required: true, message: 'Last name cannot be empty!' }]}
          >
            <Input placeholder="Please enter your last name" allowClear />
          </Form.Item>
          <Form.Item
            label="Email"
            name="email"
            rules={[
              {
                type: 'email',
                message: 'Incorrect email format!',
              },
              { required: true, message: 'Email cannot be empty!' }
            ]}
          >
            <Input placeholder="Please enter your email" allowClear />
          </Form.Item>
          <Form.Item
            label="Career"
            name="career"
          >
            <Select
              placeholder="Please select your career"
              options={[
                { value: 'Student', label: 'Student' },
                { value: 'Teacher', label: 'Teacher' },
              ]}
              allowClear
            />
          </Form.Item>
          <Form.Item
            label="Office"
            name="office"
          >
            <Input placeholder="Please enter your office" allowClear />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Please fill out the questionnaire"
        open={isSurveyModalOpen}
        okText="Submit"
        cancelText="Cancel"
        confirmLoading={btnLoading}
        onOk={handleSurveyOk}
        onCancel={handleSurveyCancel}>
        <Form
          form={surveyForm}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          labelAlign="left"
          colon={false}
          onFinish={handleSurveyFinish}
          autoComplete="off"
        >
          <Form.Item
            label="Satisfaction"
            name="satisfaction"
            rules={[{ required: true, message: 'Satisfaction cannot be empty!' }]}
          >
            <Select
              placeholder="Please select satisfaction"
              options={[
                { value: 'dissatisfied', label: 'Dissatisfied' },
                { value: 'ordinary', label: 'Ordinary' },
                { value: 'satisfied', label: 'Satisfied' },
                { value: 'very satisfied', label: 'Very satisfied' },
              ]}
              allowClear
            />
          </Form.Item>
          <Form.Item
            label="Suggestion"
            name="suggestion"
            rules={[{ required: true, message: 'Suggestion cannot be empty!' }]}
          >
            <Input.TextArea placeholder="Please input suggestion" allowClear rows={4} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default App;